<!doctype html>
<html long="zh">
<head>
    <meta charset="utf-8">
    <title>管理员登陆界面</title>
    <link rel="stylesheet" href="login.css">
</head>
<style>
      body{
        background:url(../bk.png) no-repeat;
        background-size: 100% 100%;
        background-attachment: fixed;
      }
</style>
<body>
<div id="abb">
<!--中部内容-->
<div class="wrap" id="wrap" >
    <div class="logWrap" >
        <img id="banner" class="banner" src="../jiemian.png" >
        <div class="logShow">
            <!-- 头部提示信息 -->
            <div class="LoginIndex LoginTop">
                <p class="p1">登录</p>
            </div>
            <!-- 输入框 -->
            <div class="InputStr">
                  <ion-icon name="person-outline" width="20" height="20"></ion-icon>
                <input type="text" id="hao"
                       placeholder="输入账号" />
            </div>
            <div class="InputStr">
                  <ion-icon name="key-outline" width="20" height="20"></ion-icon>
                <input type="text" id="pwd"
                       placeholder="输入密码" />
            </div>
            <div class="LoginButton">
                <a target="_self" @click="login()"><button>登 录</button></a>
                <a href="login.html" ><button>返 回</button></a>
            </div>
        </div>
    </div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
<script>
      const vm = new Vue({
            el:"#abb",
            data() {
                  return {
                        user:[]
                  }
            },
            methods: {
                  login(){
                        this.user = {
                            hao:document.getElementById("hao").value,
                            pwd:document.getElementById("pwd").value,
                        }
                        axios.post(`http://localhost:8080/api/guan`,this.user)
                        .then((response)=>{
                              if(response.data){
                            
                                    alert("登陆成功！");
                                    location.href="patient.html";
                                    
                              }else{
                                    alert("登陆失败！");
                              }
                        })
                        .catch(function (error) {
                        })                        
            }
      }
      })
</script>
